import React,{Component}   from 'react';

// 发布订阅
/**
 * 发布订阅 相当于java 中的观察者模式
 * 这里是我手写的 发布订阅模式, （发布者）通过属性的set方法调用该属性对应的执行方法集合(订阅者、观察者)
 * 如有雷同纯属巧合 
 */

// 发布订阅 bus 
var bus = {

  name:"小张",
  //订阅函数这集合
  nameList:[],
  //调用此方法发布消息, 执行所有订阅方法
  setName(newName){
    this.name = newName;
    // 执行订阅者
    this.nameList.forEach((callback) => {
      callback && callback(newName);
    });
  },
  // get 方法用于懒加载 
  getName(){
    // 用于懒加载
  }

}



class App extends Component {
  state = {
    name: "小明",
  };

  handleEvent = (name) => {
    this.setState({
      name
    });
    // console.log("父组件定义的event事件")
  };
  render() {
    return (
      <div>
       
        <Item1  />

        <Item2  />
      
      </div>
    );
  }
}

//子组件
class Item1 extends Component {

  state = {
    name: "小李",
  };

/**
 * 它在组件挂载到 DOM 树之后立即调用。
 */
componentDidMount() {

  // 订阅函数调用
  bus.nameList.push((newName)=>{
    this.setState({
        name:newName||"小明"
    })
  })

}
  

  render() {
    return (
      <div style={{ background: "red" }} >

        <div>
          <span>订阅组件姓名:</span>
          {this.state.name}
        </div>
        <span>订阅组件</span>
      </div>
    );
  }
}

//子组件
class Item2 extends Component {

  state = {
    name: "小王",
  };
  
  render() {
    return (
      <div style={{ background: "yellow" }}>
        <button
          onClick={() => {
            console.log("发布组件， 修改 父组件name 值!");
            bus.setName("老王");
          }}
        >
          发布组件click
        </button>
        <span>发布组件</span>
      </div>
    );
  }
}



export default App;